<template>
  <div class="layout-container">
       
 <el-menu class="el-menu-demo" mode="horizontal" active-text-color="red">
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2">客户管理</el-menu-item>
            <el-menu-item index="3">账户管理</el-menu-item>
          </el-menu>
    <el-row class="row-demo">
      <div class="grid-content bg-purple-dark"></div>
      <el-col :span="8">
        <div class="grid-content bg-purple-dark"></div>
      </el-col>
      
      <el-col :span="8">
        <div class="grid-content bg-purple-dark"></div>
      </el-col>
    </el-row>
    <h5>Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。</h5>
    <el-row :gutter="100">
      <el-col :span="12">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
    </el-row>
    <h5>分栏偏移 --支持偏移指定的栏数。--->通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。</h5>
    <el-row>
      <el-col :span="6">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="6" :offset="2">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
    <h5>
      row 将 type 属性赋值为 'flex'，可以启用 flex 布局，并可通过 justify
      属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
      <br />space-between 项目位于各行之间留有空白的容器内。
      pace-around 项目位于各行之前、之间、之后都留有空白的容器内。
    </h5>
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="6">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light"></div>
      </el-col>

      <el-col :span="6">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
  </div>
</template>



<style lang="scss" scoped>
 .el-menu {
      /* border-bottom: 0; */
    
    border-bottom: 0px ;
    }
.el-menu-item.is-active {
   background-color:  #591f1f !important;
}
.el-row {
  margin-bottom: 3px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #591f1f;
  margin-top: 100px
}
.bg-purple {
  background: red;
}
.bg-purple-light {
  background: #d7f376;
}
.grid-content  {
  /* border-radius: 8px; */
  min-height: 20px;
  
}
</style>
